<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位技巧</title>
    <style>
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top:300px;
        }
        .left{
            background-color: red;
            position: fixed;
            left: 20px;
        }
        .right{
            background-color: #00f;
            position: fixed;
            right: 20px;
        }
        .top{
            background-color: lightgreen;
            color: green;
            font-size: 30px;
            height: 120px;
            position: fixed;
            width: 100%;
            top: 0;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左边的广告条</div>
    <div class="right">我是右边的广告条</div>
    <div class="main">
        <div>哈哈哈哈哈哈哈哈哈哈Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut autem fugiat magni nulla odio, ratione.
            Aliquid assumenda aut autem consequatur cum dolorem esse excepturi magni, nemo obcaecati, quasi sequi.
        </div>
        <div>A ad amet consequuntur eius eos, facere hic illo ipsum itaque labore laudantium magnam maiores natus
            necessitatibus nihil officiis perferendis quaerat quasi quia rem repellendus sapiente tempora totam voluptas
            voluptatibus.
        </div>
        <div>Ea fuga iste ratione. Ab aspernatur beatae deserunt eligendi enim error expedita, iusto non obcaecati odio
            omnis pariatur placeat rerum saepe sint temporibus velit? Accusantium consequuntur error est itaque rem.
        </div>
        <div>Aliquid assumenda culpa deleniti deserunt ducimus esse eum excepturi facilis illo inventore ipsam itaque,
            magni nam natus nostrum odit possimus quaerat reiciendis repudiandae saepe sint tempore ullam veniam
            voluptates voluptatum.
        </div>
        <div>Ab distinctio, eius error esse itaque laborum molestiae molestias omnis optio quidem, quod quos recusandae
            suscipit? Accusamus alias, aspernatur, autem blanditiis, ex modi non obcaecati possimus quaerat quas soluta
            unde?
        </div>
        <div>Culpa fugiat hic illum reprehenderit vitae? Aliquid blanditiis consequatur consequuntur deleniti eos facere
            harum inventore, iste laborum mollitia numquam obcaecati quaerat quasi quibusdam, quis repellat temporibus
            ut. Eius nisi, quae!
        </div>
        <div>Aliquid beatae consectetur cumque delectus dignissimos ea, eos est et eum fugiat id incidunt ipsa iste iure
            magnam, modi molestiae pariatur quaerat quas ratione sequi ullam veritatis? Error expedita, quis.
        </div>
        <div>Ea officia, quibusdam. Aut consequuntur distinctio eligendi exercitationem fuga incidunt iusto,
            necessitatibus, numquam odio pariatur provident sapiente soluta tempora, vel velit? Aperiam autem
            consectetur doloremque doloribus impedit numquam reprehenderit voluptatum?
        </div>
        <div>Accusamus corporis debitis eos, fugit hic illum laudantium molestias necessitatibus nisi, nobis, obcaecati
            odit reiciendis sequi sit voluptate? Dolor error itaque laboriosam, molestias optio quibusdam quo
            voluptatem! Maxime, quas sunt!
        </div>
        <div>A aliquam animi autem corporis cumque dicta doloremque, doloribus enim facere facilis illo illum in ipsa
            maiores maxime nam natus nesciunt nihil quidem quos ut voluptas voluptate voluptatibus. Ab, laboriosam.
        </div>
        <div>Ad amet autem culpa deserunt dicta distinctio dolorem doloremque error est facere, natus odio officia quam
            quasi quos similique vel? Architecto culpa eaque enim laboriosam quibusdam repudiandae, sequi velit
            voluptatum.
        </div>
        <div>At consequatur esse fugiat fugit hic iste labore mollitia nostrum, numquam placeat quos, sapiente
            similique. Amet culpa delectus dolorem exercitationem explicabo incidunt libero magnam non repudiandae
            sequi? Accusamus fuga, saepe!
        </div>
        <div>Adipisci asperiores at, consectetur deleniti deserunt dignissimos ducimus ea facere impedit ipsum iure
            laboriosam molestias nobis, perferendis possimus qui quis recusandae similique ullam velit. Ab corporis
            dignissimos itaque molestiae quod?
        </div>
        <div>Asperiores deserunt ipsum nihil officia placeat saepe ullam ut! Esse, impedit quidem. Consequatur
            cupiditate debitis, est labore praesentium quidem repellat vitae. Consectetur earum eligendi mollitia
            perspiciatis qui rerum totam voluptates!
        </div>
        <div>Cum ducimus earum enim error impedit labore numquam odit pariatur perspiciatis, provident quaerat, quas
            quos repudiandae rerum vitae. Ad aliquam doloribus facilis nobis omnis quas quidem sit veniam vitae. Sit?
        </div>
        <div>Ducimus eveniet facere fuga necessitatibus odit quae, quia quod ratione reprehenderit voluptate. Blanditiis
            deserunt distinctio, earum fugiat fugit id ipsum laboriosam magnam mollitia necessitatibus non pariatur quas
            qui quibusdam temporibus!
        </div>
        <div>Blanditiis consequuntur earum fuga impedit inventore nulla quidem vero! Alias asperiores beatae dolor
            dolorem illum laboriosam qui saepe. Aliquam corporis culpa doloribus eaque fugiat mollitia nam odit
            praesentium reiciendis. Eius.
        </div>
        <div>Aut cum, dolorem error facere labore molestias nisi non odio odit officia porro, possimus quam quas quo,
            sint sunt vitae. Esse exercitationem iusto perspiciatis quo rem temporibus ullam! Dignissimos, officiis!
        </div>
        <div>Doloribus facilis iure mollitia nulla quo reprehenderit sequi similique soluta, veritatis vitae? Accusamus
            aliquid autem exercitationem illo, inventore itaque laudantium maiores minus nam nobis quae quasi rem
            repudiandae sed vel?
        </div>
        <div>Iste, placeat, veritatis. Ab accusantium ad aliquid atque autem consectetur consequatur cum cumque illum
            iure, molestias officia omnis porro quam qui quisquam rem, repellendus reprehenderit similique suscipit
            tempore vitae voluptatem?
        </div>
        <div>Ab accusamus aperiam autem consequuntur, cupiditate dolor doloribus ea esse ex, explicabo facilis hic illo
            laudantium maiores molestiae neque numquam, obcaecati omnis possimus quo quos reprehenderit sint sunt ullam
            veniam.
        </div>
        <div>Asperiores cum debitis, dolor doloremque est et eum exercitationem facilis fuga inventore ipsam minima
            mollitia natus nesciunt odio, omnis praesentium quaerat sint sit sunt temporibus vel voluptatum. Explicabo,
            optio temporibus?
        </div>
        <div>Ab accusamus alias consequatur cumque doloribus error eveniet id natus nemo, nihil odit porro qui quidem
            quo repudiandae saepe, suscipit totam. Aut debitis fugiat laborum laudantium natus officiis ratione.
            Tempore?
        </div>
        <div>Animi cumque dolorum ea. Asperiores delectus distinctio dolorum eius enim error, et eum fugit illum in
            incidunt nihil porro possimus praesentium, quas quasi quo recusandae repellendus sed sunt tempora ut.
        </div>
        <div>Dignissimos impedit, quis! Assumenda enim facilis illum impedit saepe? Adipisci doloribus facere magni
            minima, quaerat quam ratione rem totam. Cum distinctio doloribus fuga illo iste laudantium odio praesentium
            provident voluptate?
        </div>
        <div>Ad alias architecto asperiores commodi culpa, deserunt dolore dolorem error id labore laudantium libero
            natus nulla odio, omnis porro praesentium quae quo repellat sapiente similique soluta ullam veniam voluptas
            voluptatum!
        </div>
        <div>Asperiores deserunt enim explicabo nihil perspiciatis quae quisquam repellat tempora vel veritatis? Alias
            debitis deserunt dolores, explicabo facilis laudantium qui voluptatum. Adipisci eius facere, fuga magni nemo
            recusandae soluta tempore.
        </div>
        <div>Ad deleniti doloribus, eos exercitationem fuga ipsum necessitatibus nihil officiis optio rem saepe sed,
            soluta! Adipisci, animi consequatur consequuntur ea fuga incidunt molestias odit quo rem similique, tempora
            ullam voluptatum?
        </div>
        <div>Blanditiis ex neque quae quas quia ratione sed ullam! Blanditiis culpa dignissimos dolores doloribus, enim,
            error facilis impedit in inventore labore molestiae quasi quod quos rem soluta ullam, voluptate! Pariatur?
        </div>
        <div>Commodi dicta dolor ea facilis in magnam odit sapiente. Ad alias assumenda corporis hic id labore minus
            omnis, placeat quaerat quas, rem sequi suscipit, voluptate. Error et perspiciatis quia unde.
        </div>
    </div>
</body>
</html>